<template>
  <div class="config-info">
    <div class="content-box">
      <el-table :data="tableData" border>
        <el-table-column prop="childName" label="河系/区域名称" align="center"></el-table-column>
        <el-table-column prop="childTypeName" label="配置方案类型" align="center" width="200"></el-table-column>
        <el-table-column prop="name" label="河系/区域方案" align="center">
          <template #default="scope">
            <el-select v-model="tableData[scope.$index].childScid" placeholder="请选择" :disabled="true">
              <el-option v-for="item in scope.row.schemes" :key="item.scid" :label="item.scName"
                :value="item.scid"></el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getBasinChildrenSchemes, getCalcModelType } from '@/services/modules/compute-methods'
const props = defineProps({
  row: {
    type: Number,
    default: 0
  },
  zId: {
    type: Number,
    default: 0
  }
})
const tableData =ref([])
// 查询详情
const gitDetialPlan = () => {
  getBasinChildrenSchemes({
    basinId: props.zId,
    basinScid: props.row.id,
    model: props.row.model
  }).then((res) => {
    if (res.code === 200) {
      tableData.value = res.data
      tableData.value.forEach((item, index) => {
        if (!item.childScid && item?.schemes?.length>0) {
          item.childScid = item?.schemes[0].scid
        }
      })
    }
  })
}
watch(() => { props.row }, () => {
  gitDetialPlan()
}, {
  deep:true,
  immediate:true
}
)



</script>

<style lang="less" scoped>
.config-info {
  width: 100%;
  height: 100%;
  .top-input {
    display: flex;
    align-items: center;
    width: 350px;
    margin-bottom: 20px;
    span {
      width: auto;
      white-space: nowrap;
    }
  }
  .content-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
:deep(.el-select){
  width: 100%;
}
  }
}
</style>
